<template>
  <div
    v-if="props.lotteryCode === 'PCNN'"
    class="column-center odds-item"
    :class="{ selected: isSelected }"
    @click="selectBtn"
  >
    <span class="number">{{ upperCase(String(data.number)) }}</span>
    <span v-if="playTypeCode === 'XAB'" class="odds">{{ data.odds }} - {{ data.maxOdds }}倍</span>
    <span v-if="playTypeCode === 'SH'" class="odds">{{ data.odds }} : {{ data.maxOdds }}</span>
  </div>

  <div v-else class="column-center odds-item" :class="{ selected: isSelected }" @click="selectBtn">
    <span class="number">{{ data.number }}</span>
    <span v-if="isNeedEnName" class="en-name">
      {{ enNames?.[data.number] ?? '' }}
    </span>
    <span class="odds">{{ getOddsDiff }}</span>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { upperCase } from 'lodash-es'

type Props = {
  data: {
    number: number
    odds?: number
    maxOdds?: number
  }
  isSelected: boolean
  lotteryCode?: string
  playTypeCode?: string
}

const props = defineProps<Props>()

const emits = defineEmits(['selectOdds'])

const selectBtn = () => {
  emits('selectOdds')
}

const needEnName = ['JNDSSC_LHH']

const isNeedEnName = computed(() => needEnName.includes(`${props.lotteryCode}_${props.playTypeCode}`))

const enNames = {
  龙: 'Dragon',
  虎: 'Tiger',
  和: 'Tie',
}

const needMaxOdds = ['JNDSI-DXDS', 'JNDWU-DXDS']

const getOddsDiff = computed(() => {
  const code =  props.lotteryCode + '-' + props.playTypeCode
  return needMaxOdds.includes(code)? props.data.maxOdds : props.data.odds
})

</script>

<style scoped lang="less">
.odds-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 32px;
  margin-bottom: 6px;
  text-align: center;
  //background: #2a2d47;
  background-size: 66px 32px;
  line-height: 1;
  border-radius: 4px;
  //color: #777887;
  background: linear-gradient(180deg, #825bd6 0%, #af47ff 100%);
  .number {
    font-size: 14px;
    //width: 500;
    color: #fff;
  }

  .odds {
    font-size: 11px;
    padding-top: 1px;
    box-sizing: border-box;
    color: #ffea47;
  }

  .en-name {
    margin: 6px 0 16px;
    color: #ffea47;
    font-size: 16px;
  }

  &.selected {
    background: linear-gradient(180deg, #ff364e 0%, #e85163 100%);
    .number {
      color: #fff;
    }

    .odds {
      color: #fff;
    }

    .en-name {
      color: #fff;
    }
  }
}
</style>
